<template>
  <div>
    <el-dialog
      @close="handleClose"
      title="添加新用户"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form label-width="80px" :model="userFrom">
        <el-form-item label="活动名称">
          <el-input v-model="userFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="活动日期">
          <el-input v-model="userFrom.data"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-input v-model="userFrom.region"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="userFrom.rule"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :loading="isConfirmLoading"
          type="primary"
          @click="handleConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { apimockactivitys } from "@/api/mockActivityregister";
import _ from "lodash";
export default {
  name: "DialogUser",
  components: {},
  props: {
    toggle: {
      //当toggle变为TRUE的时候 ， 让dialogVisible变为TRUE，即显示dialog toggle
      type: Boolean,
      required: true,
    },
    //editUser 的作用 ： 1.存储的数据 即为编辑本行的数据
    // 若为空对象，即表示新增用户
    //若为有数据的对象，则表示为编辑用户
    //关键点： 本组件内， 如何知道是新增用户还是编辑用户？？-->通过传参，告诉组件，是新增还是编辑。
    editUser: {
      type: Object,
      //若edituser不传参 默认值为空数组
      default() {
        return {};
      },
    },
  },
  computed: {
    //若值为TRUE 为编辑用户 否则为新建用户
    isEdit() {
      return !_.isEmpty(this.editUser);
    },
  },
  data() {
    return {
      dialogVisible: false, //新增用户的dailog toggle
      userFrom: {
        name: "",
        data: "",
        region: "",
        rule: "",
      },
      //点击确定，走接口时要转圈圈

      isConfirmLoading: false,
    };
  },
  methods: {
    //点击确定按钮，触发本回调函数
    handleConfirm() {
      if (this.isEdit) {
        // 需要 进行 编辑 - 的数据提交
        this.ajaxEditUser();
      } else {
        // 需要进行 「新增」 - 的数据提交
        this.ajaxAddUser();
      }
    },
    //新增用户 调用该接口
    ajaxAddUser() {
      this.isConfirmLoading = true; //确定按钮 ，开始 转圈圈

      //即向后台，增加用户输入的表单数据
      apimockactivitys
        .append(this.userFrom)
        .then((res) => {
          console.log("增加一条数据", res);
          if (res.status === "success") {
            this.$message.success("数据刷新成功");

            //一秒之后 为你刷新数据
            setTimeout(() => {
              this.$emit("updateTable");
            }, 1000);
          }
        })
        .finally(() => {
          this.isConfirmLoading = false; //接口取消完数据 ，取消转圈圈；
          this.dialogVisible = false;
        });
    },
    //编辑调用接口
    async ajaxEditUser() {
      this.isConfirmLoading = true;
      try {
        const res = await apimockactivitys.set(this.userFrom.id, this.userFrom);

        if (res.status === "success") {
          this.$message.success(`编辑用户成功，1S 之后为您更新 table`);

          // 1S之后，为您刷新table`
          setTimeout(() => {
            this.$emit("updateTable");
          }, 1000);
        }
      } catch (err) {
        this.$message.error("编辑用户失败！！");
      } finally {
        this.isConfirmLoading = false; //接口取消完数据 ，取消转圈圈；
        this.dialogVisible = false;
      }
    },
    handleClose() {
      //只要 dialog 被关闭，则告诉父组件 赋值给toggle的变量 设为 FALSE ， 以便后续 watch-toggle
      this.$emit("closeDialog");

      //只要 dialog 被关闭，则清空from的数据
      this.userFrom = {
        name: "",
        data: "",
        region: "",
        rule: "",
      };
    },
  },
  watch: {
    toggle(newValue) {
      this.dialogVisible = newValue;

      // this.userFrom = this.editUser;
      // console.log(this.isEdit);

      //若编辑用户 弹窗中显示被编辑的用户的数据
      if (this.isEdit) {
        //editUser为堆内存地址，赋值给了userFrom，本质是指向了 统一内存空间
        //即 table中 row 的内存空间
        this.userFrom = _.cloneDeep(this.editUser);
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
